<template>
	<view class="Allitem">
		<view class="header1">
			根据您选择的套餐，推荐您增加以下体检项目：
		</view>
		<view class="partone" v-for="(v,i) in radiolist">
			<!-- v-model="radiovalue" -->
			<view class="aaa">
				<view class="">
					<uv-radio-group class="radioBtn" v-model="radiovalue">
						<uv-radio :customStyle="{margin: '8px'}" :key="v.itemId" :label="v.itemName" :name="v.itemName">
						</uv-radio>
					</uv-radio-group>
				</view>
				<view class="phot ">
					<uni-icons type="more-filled" size="30" @click="popupClick(i)"></uni-icons>
				</view>
			</view>
			<view class="firstone">
				<view class="word">
					<text class="price1" style="font-size: 24rpx;">￥{{v.currentPrice}}</text>
					<text class="price">￥{{v.originalPrice}}</text>
				</view>
				<view class="right1">
					已有{{v.orderNumber}}人购买
				</view>
			</view>
		</view>
		<view class="footerBtn">
			<view class="leftBtn">
				<button
					style="color: #59B58D; border-radius: 0rpx 0rpx 0rpx 0rpx; border-top:1rpx solid #59B58D;">跳过</button>
			</view>
			<view class="rightBtn">
				<button style="	border-radius: 0rpx 0rpx 0rpx 0rpx;
			background-color: #59B58D; color: white;" @click="sureBtn">确定</button>
			</view>
		</view>
		<!-- 弹框 -->
		<view class="content ">
			<cc-popup :isShow='isshow' width="calc(100vw - 70px)" height="346px" radius="16rpx">
				<!-- 自定义展示内容 -->
				<view class="modelContent" >
					<view style="margin-top: 6px;">
						详情
					</view>
					<view style="margin-top: 20px; color: #666666; margin: 6px 12px;" >
						<view class="">
							<text>检查意义：</text>
							<view>{{radiolist[whichOne].examinationMeaning}}</view>
						</view>
						<view class="">
							<text>检查范围：</text>
							<view>{{radiolist[whichOne].examinationScope}}</view>
						</view>
					</view>
				</view>
				<view class="close" @click="isshow=false">✕</view>
			</cc-popup>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'

	import { reactive, ref } from 'vue'
	interface ificationData {
		itemName : string,
		currentPrice : number,
		originalPrice : number,
		orderNumber : number,
		itemId : number,
		examinationMeaning : string,
		examinationScope : string
	}
	const radiovalue = ref('')
	const title = ref('Hello')
	const companyList = reactive([{}, {}, {}])
	const isshow : any = ref(false)
	const radiolist : ificationData[] = reactive([])
	const whichOne=ref(0)
	onLoad((opion) => {
		const packages = (id) => {
			uni.request({
				url: 'http://172.16.129.235:8080/patient/additionalPack/additionalPackageList?packageId=' + id,
				success: function (res) {
					radiolist.length=0
					radiolist.push(...res.data.data)
					console.log(radiolist,1111)
				}
			})
		}
		packages(opion.id)
	})
	const sureBtn = () => {
		if (radiovalue.value == '') {
			uni.showModal({
				title: '提示',
				content: '你还未选择加项，请选择加项？',
				success: function (res) {
					if (res.confirm) {
						console.log('点击了确认')
					} else {
						console.log('点击了取消')
					}
				}
			})
		} else {
		}
	}
	const popupClick = (i) => {
		isshow.value = !isshow.value;
		console.log(radiolist);
		whichOne.value=i
	};

</script>
<style lang="less" scoped>
	.Allitem {
		.footerBtn {
			display: flex;
			bottom: 0rpx;
			position: fixed;
		}

		.leftBtn {
			width: 376rpx;
			height: 96rpx;
		}

		.rightBtn {
			width: 376rpx;
			height: 96rpx;

		}

		.content {
			display: flex;
			flex-direction: column;
			border-radius: 0rpx 0rpx 0rpx 0rpx;

		}

		.popUpBtn {
			height: 80rpx;
			line-height: 80rpx;
			width: 320rpx;
			margin-top: 120rpx;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 50rpx;
			background-color: bisque;
			text-align: center;
		}

		.modelContent {
			width: 100%;
			height: 100%;
			margin: auto;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			background-color: white;
		}

		.imageV {
			margin-top: 0px;
			width: calc(100vw - 100px);
			height: calc((100vw - 100px) * 0.567);
		}

		.close {
			width: 60rpx;
			height: 60rpx;
			color: #dbdbdb;
			// line-height: 60rpx;
			text-align: center;
			border-radius: 50%;
			border: 1px solid #0000;
			position: relative;
			bottom: 20rpx;
			left: 300rpx;
			transform: translate(-50%, -50%);
		}

		.aaa {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
		}

		.partone {
			height: 140rpx;
			border-bottom: 1rpx solid #c8c8c8;

		}

		.uv-radio {
			font-size: 28rpx;
		}

		.header1 {
			margin-left: 20rpx;
			font-size: 28rpx;
			margin-top: 20rpx;
		}

		.phot {
			margin-right: 20rpx;
		}

		.word {
			margin-left: 50rpx;
		}

		:deep(.uv-radio-group--row.data-v-0d20093d) {
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
		}

		.radioBtn {
			display: flex;
			// 	justify-content: space-between;
		}

		// .word {}

		.price {
			margin-left: 20rpx;
			color: #c8c8c8;
			text-decoration: line-through;
			font-size: 24rpx;
		}

		.right1 {
			color: #c8c8c8;
			font-size: 24rpx;
			margin-right: 20rpx;

		}


	}

	.firstone {
		display: flex;
		justify-content: space-between;
	}
</style>